import { Button, Card, Form, Input, Space } from 'antd'
import Table, { ColumnsType } from 'antd/lib/table';
import React, { useEffect, useState } from 'react'
import { SearchOutlined, DeleteOutlined, EditOutlined } from "@ant-design/icons";
import { FormFields, HospitalSetItem } from '@/api/hospital/hospitalSet/types';
import { reqGetHospitalSet } from '@/api/hospital/hospitalSet';
import { useNavigate } from 'react-router-dom';


export default function HospitalSet() {
  let onFinishFailed = () => { }
  // 定义初始化状态
  let [hospital, setHospital] = useState<HospitalSetItem[]>([])
  // 定义数据总数
  let [total, setTotal] = useState(0);
  // 定义页码说
  let [page, setPage] = useState(1);
  // 定义每页的的数量
  let [pageSize, setPageSize] = useState(3);
  // 定义是否在加载中的状态
  let [isLoading, setIsLoading] = useState(false);
  // 获取表单的值
  let [formFields, setFormFields] = useState<FormFields>({ hosname: "", hoscode: '' })
  // 获取表单
  let [from] = Form.useForm();
  // 获取id
  let [selectedKeys, setSelectedKeys] = useState<React.Key[]>([])
  // 编程导航
  let navigate = useNavigate();

  // 表单提交回调
  let onFinish = (values: FormFields) => {
    setFormFields(values)
  }
  //定义表格结构
  let columns: ColumnsType<HospitalSetItem> = [
    {
      title: '序号',
      render: (_, record, index) => {
        return index + 1;
      }
    },
    {
      title: '医院名称',
      dataIndex: 'hosname'
    },
    {
      title: '医院编号',
      dataIndex: 'hoscode'
    },
    {
      title: 'API基础路径',
      dataIndex: 'apiUrl'
    },
    {
      title: '签名',
      dataIndex: 'signKey'
    },
    {
      title: '联系人姓名',
      dataIndex: 'contactsName'
    },
    {
      title: '联系人手机号',
      dataIndex: 'contactsPhone'
    },
    {
      title: '操作',
      width: 150,
      fixed: 'right',
      render: () => {
        return <Space>
          <Button type="primary" icon={<EditOutlined />}></Button>
          <Button type="primary" danger icon={<DeleteOutlined />}></Button>
        </Space>
      }
    }
  ];
  // 定义回调函数
  useEffect(() => {
    // 声明一个异步函数
    let getData = async () => {
      setIsLoading(true)
      // 调用函数
      let result = await reqGetHospitalSet({ page: page, limit: pageSize, hoscode: formFields.hoscode, hosname: formFields.hosname });
      // 更新状态
      setHospital(result.records)
      // 更新总数
      setTotal(result.total)
      // 更新
      setIsLoading(false)
    }
    getData()
  }, [page, pageSize, formFields]);
  let reset = () => {
    from.setFieldsValue({ hosname: '', hoscode: '' });
    setFormFields({ hosname: '', hoscode: '' });
    setPage(1);
  }
  return (
    <Card>
      <Form
        form={from}
        name="basic"
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
        layout='inline'
      >
        <Form.Item
          name="hosname"
        >
          <Input placeholder='医院名称' />
        </Form.Item>

        <Form.Item name="hoscode">
          <Input placeholder='医院编号' />
        </Form.Item>
        <Form.Item >
          <Space>
            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
              查找
            </Button>
            <Button onClick={reset}>清空</Button>
          </Space>
        </Form.Item>
      </Form>
      <div className='h-20'></div>
      <Space>
        <Button type="primary" onClick={() => navigate('/syt/hospital/hospitalSet/add')}>添加</Button>
        <Button danger type='primary' disabled={selectedKeys.length === 0}>批量删除</Button>
      </Space>
      <div className="h-20"></div>

      <Table
        rowSelection={{
          type: 'checkbox',
          onChange: (selectedKeys: React.Key[], selectedRows: HospitalSetItem[]) => {
            setSelectedKeys(selectedKeys)
          }
        }}
        loading={isLoading}
        columns={columns}
        dataSource={hospital}
        bordered
        rowKey={'id'}
        scroll={{ x: 2000 }}
        pagination={{
          total: total,
          pageSize: pageSize,
          current: page,
          showSizeChanger: true,
          pageSizeOptions: [5, 10, 15, 20],
          showQuickJumper: true,
          showTotal: (total) => {
            return `总计:${total}条`;
          },
          onChange: (page: number, pageSize: number) => {
            setPage(page);
            setPageSize(pageSize);
          }
        }}
      />
    </Card>
  )
}
